<template>
  <div class="about">
    <img class="top-theme" alt="Vue logo" src="@/assets/home/m2.png">
    <!-- 组件里组件的标签进行小写 -->
    <!-- <swiper :url="require('./assets/home/m3.png')"/> -->
    <!-- :num="a" :obj="obj" -->
    <swiper @sub-event="onSwiperClick" :url="m3" />
    <button @click="OnChangeComponent('keep')">点击切换到Keep组件</button>
    <span>---</span>
    <button @click="OnChangeComponent('static')">点击切换到Static组件</button>
    <!-- include exclude 灵活使用需要被缓存的组件 根据组件里面定义的名称为主 -->
    <!-- 所以组件创建的时候，需要定义名字name 方便在keep-alive上使用 -->
    <!-- include 想包含多个组件的使用 逗号隔开，或者使用数组，正则表达式的形式  exclude 也是-->
    <keep-alive exclude="Static">
      <component :is="currentComponent"/>
    </keep-alive>
    <!-- <keep />
    <static /> -->
  </div>
</template>

<script>
import Swiper from '@/components/swiper'
import Static from '@/components/static.vue'
import Keep from '@/components/keep.vue'
// const m3 = require('./assets/home/m3.png')
import m3 from '@/assets/home/m3.png'
import store from '@/store'
import {
  ref,
  reactive
} from 'vue'

const a = ref(1)
const obj = reactive({
  name: '777'
})
const currentComponent = ref('keep')
export default {
  name: 'Home',
  components: { // 标签写的组件名字 由 key来决定
    Swiper,
    Static,
    Keep
  },
  setup (props, context) {
    function OnChangeComponent (event) {
      currentComponent.value = event
    }
    function handleClick () {
      a.value++
    }
    function onSwiperClick (event) {
      // console.log(store.state.url)
      // store.state.url = 'dsds' // 不能直接修改，不能追踪修改
      // console.log(store.state.url)
      // context.emit('change-view', {
      //   name: 'Detail',
      //   params: {
      //     id: 3
      //   }
      // })
      // store.commit('changeView', 'SubDetail')
      // store.commit({ //想传多个参数的时候，就传个对象进去, 可是参数和方法名不分开（type,方法名）
      //   type: 'changeView',
      //   url: 'SubDetail',
      //   age: 8
      // })
      // store.commit('changeView', { // 一般使用这种，参数和方法名分开
      //   url: 'SubDetail',
      //   age: 9
      // })
      store.commit('changeView', {
        name: 'Detail',
        params: {
          id: 3
        }
      })

      // console.log(store.state.url)
    }
    //
    return {
      m3,
      a,
      obj,
      OnChangeComponent,
      handleClick,
      onSwiperClick,
      currentComponent
    }
  }
}
</script>

<style>
.top-theme {
  width: 100%;
}
</style>
